<template>
  <!-- 询价记录 -->
  <div class="modelInfoTab" :style="{height:tabHeight+'px'}">
    <!-- 查询表单 -->
    <div class="queryFormBox">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryForm.clientContractNo" placeholder="请输入合同编号"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryForm.productNo" placeholder="请输入产品名称"/>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="dateTimeRange" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryFun" icon="el-icon-search" size="small">查询</el-button>
          <!-- <el-button type="primary" @click="addFun" icon="el-icon-edit" size="small">新增</el-button>
          <el-button type="danger" @click="delsFun" size="small">批量删除</el-button>
          <el-button type="success" @click="exportFun" size="small">导出</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table :data="tableInfo.tableData" border :height="tabHeight - 95"
        :header-cell-style="{ background: '#E5EDFD' }">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column header-align="center" align="center" label="序号" width="70">
          <template slot-scope="scope">
            {{ (pageInfo.pageIndex - 1) * pageInfo.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="客户合同编号" prop="clientContractNo" header-align="center" align="center" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column label="产品名称" prop="productNo" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="询价供应商" prop="supplierName" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="供应商产品编号" prop="supplierProductNo" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="确定供应商" prop="recommendSupplierName" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="订单总单价" prop="orderUnitPrice" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="客户开模费用" prop="clientModelAmount" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="客户打样费用" prop="clientProofingAmount" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="客户订单总价" prop="clientTotalAmount" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="供应商单价" prop="supplierUnitPrice" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="供应商模具费用" prop="supplierModelAmount" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="供应商打样费用" prop="supplierProofingAmount" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="供应商总价格" prop="supplierTotalAmount" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="交期" prop="deliveryDays" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="上线时间" prop="onlineTime" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="运输方式" prop="transportWay" header-align="center" align="center" show-overflow-tooltip width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.transportWay == 0" :key="scope.row.transportWay" type="primary" size="small">供方承担</el-tag>
            <el-tag v-if="scope.row.transportWay == 1" :key="scope.row.transportWay" type="danger" size="small">需方自提</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="含税价" prop="taxInclusive" header-align="center" align="center" show-overflow-tooltip width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.taxInclusive == 0" :key="scope.row.taxInclusive" type="primary" size="small">不含税</el-tag>
            <el-tag v-if="scope.row.taxInclusive == 1" :key="scope.row.taxInclusive" type="danger" size="small">含税</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="供应商付款周期" prop="paymentCycle" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="备注" prop="remark" header-align="center" align="center" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column label="推荐理由" prop="recommendDesc" header-align="center" align="center" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column label="状态" prop="status" header-align="center" align="center" show-overflow-tooltip width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" :key="scope.row.status" type="info" size="small">询价完成</el-tag>
            <el-tag v-if="scope.row.status == 1" :key="scope.row.status" type="danger" size="small">财务不通过</el-tag>
            <el-tag v-if="scope.row.status == 2" :key="scope.row.status" type="success" size="small">财务通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="附件" prop="annexFile" header-align="center" align="center" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column label="财务审核时间" prop="financeApproveTime" header-align="center" align="center" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column label="财务建议" prop="financeApproveDesc" header-align="center" align="center" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column label="财务审核状态" prop="financeApproveStatus" header-align="center" align="center" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column label="财务审核人员" prop="financeUser" header-align="center" align="center" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="140" align="center">
          <template #default>
            <el-tooltip v-if="isAuth(saveAuthName)" class="item" effect="dark" content="修改" 
              placement="bottom" :hide-after="1800" :open-delay="800">
              <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
            </el-tooltip>
            <el-tooltip v-if="isAuth(deleteAuthName)" class="item" effect="dark" content="删除" 
              placement="bottom" :hide-after="1800" :open-delay="800">
              <el-button type="danger" icon="el-icon-delete" size="small"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pageBox">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageInfo.pageIndex"
        :page-sizes="[20, 50, 100,200,1000]"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mRequest } from '@/utils/request'
import { getFormatDateTime, timeShortcutOption } from '@/utils'
import { isAuth } from '@/utils'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      isAuth: isAuth,
      saveAuthName: 'order:ordermodel:save',
      deleteAuthName: 'order:ordermodel:delete',
      queryForm: {
        clientContractNo: undefined,
        productNo: undefined,
        startDateTime: undefined,
        endDateTime: undefined,
      },
      dateTimeRange: '', //时间范围
      pickerOptions: timeShortcutOption(),
      tableInfo:{
        tableData:[],
      },
      pageInfo: {
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0
      },
    }
  },
  watch: {},
  computed: {},
  props:{
    tabHeight:{
      type: Number,
      default: 0
    }
  },
  created() { },
  mounted() {
    this.getSelectData()
    this.initTableData()
  },
  methods: {
    // 查询
    queryFun() {
      this.queryForm.startDateTime = this.dateTimeRange ? getFormatDateTime(this.dateTimeRange[0]) : undefined
      this.queryForm.endDateTime = this.dateTimeRange ? getFormatDateTime(this.dateTimeRange[1]) : undefined
      this.initTableData()
    },
    // 新增
    addFun() {
      this.dialogInfo.visible = true
    },
    // 批量删除
    delsFun() {

    },
    // 导出
    exportFun() {

    },
    // 下拉框数据
    getSelectData() {
      // mRequest('clientApi/getClientList', {}, ({ data }) => {
      //   this.clientList = data['list']
      // })
    },
    // 表格数据
    initTableData() {
      let params = {
        page: this.pageInfo.pageIndex,
        limit: this.pageInfo.pageSize,
        ...this.queryForm
      }
      mRequest('purchaseApi/listPurchaseInquiryInfoManage', params, ({ data }) => {
        this.tableInfo.tableData = data.page.list
        this.pageInfo.totalPage = data.page.totalCount
      })
    },
    // 分页事件
    sizeChangeHandle(val) {
      this.pageInfo.pageSize = val
      this.initTableData()
    },
    currentChangeHandle(val) {
      this.pageInfo.pageIndex = val
      this.initTableData()
    },
  },
}
</script>

<style lang="scss" scoped>
.modelInfoTab {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}
.queryFormBox {
  .el-button--danger {
    background-color: #ffa4a4;
    border-color: #ffa4a4;
  }
  .el-form-item{
    margin-bottom: 14px;
  }
}
.tableBox{
  flex: 1;
}
::v-deep .el-table th{
  padding: 10px 0;
}
::v-deep .el-table td{
  padding: 0;
}
.pageBox{
  height: 32px;
}
.dialogBox{
  .el-form-item{
    margin-bottom: 0;
  }
  .inputNumLayout{
    position: relative;
    .maxLabel{
      position: absolute;
      right: 130px;
      opacity: 0.5;
    }
  }
}
</style>